<template>
    <div class="module-aside-body">
        <div
            class="module-aside-button"
            v-for="(item, index) in moduleList"
            :key="index"
            :class="activeModule == item.type ? 'actived' : ''"
            @click="selectModule(item)"
        >
            <i :class="item.icon" class="iconfont"></i>
            <span>{{ item.label }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useAppStore } from "@/store/modules/app";
import { AppModule } from "@/types/app";
const moduleList = ref<Array<AppModule>>([
    {
        type: "commonUse",
        label: "资源",
        icon: "icon-wenjianjia",
    },
    {
        type: "template",
        label: "页面",
        icon: "icon-changjingguanli",
    },
    {
        type: "material",
        label: "导航",
        icon: "icon-fabusekuai",
    },
    {
        type: "datasource",
        label: "设置",
        icon: "icon-icon_shezhi",
    },
]);

const appStore = useAppStore();
const activeModule = computed(() => {
    return appStore.activeModule;
});
//选中模块
const selectModule = (item: AppModule) => {
    appStore.setModule(item.type);
};
</script>

<style scoped lang="scss">
.module-aside-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
    .module-aside-button {
        text-align: center;
        position: relative;
        font-size: 12px;
        line-height: 17px;
        border-radius: 8px;
        border: none;
        outline: none;
        width: 46px;
        height: 56px;
        cursor: pointer;
        word-break: break-all;
        user-select: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 4px;
        z-index: 999;
        &:hover {
            background: var(--background-color-primary-hover);
            color: var(--color-primary);
        }
        &.actived {
            background: var(--background-color-primary-hover);
            color: var(--color-primary);
            i {
                color: var(--color-primary);
            }
        }
        span {
            white-space: nowrap;
        }
        > i {
            display: block;
            margin-bottom: 4px;
            font-size: 24px;
            color: var(--text-color-secondary);
        }
    }
}
</style>
